<html>
	<head>
    	<link type="text/css" rel="stylesheet" href="/style/youtour.css" />
    	<script type="text/javascript" src="/script/loadTour.js"></script>
  	</head>

	<body>
		<hr>
		<h1>YouTour</h1>
		<hr>
		<h2>Tours for the public by the public</h2>
		<h3>Chosen tour: {{ tour.title }}</h3>
		<table>
			<tr><td><b>Description</b></td><td>{{ tour.description }}</td></tr>
			<tr><td><b>Start position:</b></td><td>{{ tour.startPosition }}</td></tr> 
			<tr><td><b>End position:</b></td><td>{{ tour.endPosition }}</td></tr>
			<tr><td><b>Start time:</b></td><td>{{ tour.startTime }}</td></tr>
			<tr><td><b>End time:</b></td><td>{{ tour.endTime }}</td></tr>
		</table>
		
		<h3>Stops:</h3>
		<form action="/showStop" method="post">
			<table>
				<input type="hidden" name="stopId" value="">
				{% for s in tour.stopList %}
				<tr onmouseover="highlight(this, true)" onmouseout="highlight(this, false)" onclick="chooseStop('{{ s.stopId }}', document.forms[0])"><td>{{ s.stopNumber }}</td><td>{{ s.description }}</td></tr>
				{% endfor %}
			</table>
		</form>
	</body>
</html>